import React from 'react';
import loadScript from 'scriptjs';

const { useState, useEffect } = React;

function SubAppLoader() {
    const [loaded, changeLoaded] = useState(false);
    // const [scripts, changeScripts] = useState([]);

    useEffect(() => {
        Promise.all([
            fetch('http://localhost:8081/manifest.json'),
            fetch('http://localhost:8082/manifest.json'),
        ]).then(([res, res2]) => Promise.all([res.json(), res2.json()]))
            .then(([data1, data2]) => {
                const scripts1 = [
                    data1['manifest.js'],
                    data1['vendor.js'],
                    data1['app.js'],
                ];
                const scripts2 = [
                    data2['manifest.js'],
                    data2['vendor.js'],
                    data2['app.js'],
                ];
                changeLoaded(true);
                loadScript(scripts1);
            });
    }, []);

    return (
        <>
            {loaded
                ? <div id="subapp"></div>
                : <div>Loading...</div>}
        </>
    );
}

export default SubAppLoader;
